<template>
    <div>
       <div class="title">热买推荐</div>
       <ul>
         <li class="item border-bottom" v-for="item in list" :key="item.id">
             <img :src="item.imgUrl" class="item-img" />  
             <div class="item-content">
                 <div class="item-title">{{item.title}}</div>
                 <div class="item-desc">{{item.desc}}</div>
                 <button class="btn-info">查看详情</button>
                 
             </div>
         </li>
       </ul>
    </div>
</template>

<script>
    export default {
       name:'HomeRecommend', 
       props: {
         list:Array
       },
    }
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  @import '~styles/mixins.styl'
  .title
    margin-top:.2rem;
    line-height:.64rem;
    background:#e3e3e3;
    text-align:left;
    font-size:$TabTextcolor;
    text-indent:.2rem;
   .item
     display:flex;
     height:1.9rem;
     text-align:left;
     overflow:hidden; 
     .item-img
       width:1.7rem;height:1.7rem;
       padding:.1rem;
     .item-content
       padding:.1rem;
       flex:1;
       min-width:0;
       .item-title
          font-size:.32rem;
          color:$TagTextcolor;
          line-height:.54rem;
          ellipsis()
       .item-desc
          font-size:.28rem;
          color:#999;
          line-height:.44rem;
          ellipsis()
       .btn-info
          margin-top:.24rem;
          font-size:.24rem;
          padding:.05rem .2rem;
          background:yellow;
          color:$TagTextcolor;
          border-radius:.04rem;
</style>